import React, { Component } from 'react'
import empty from "../../assets/images/empty.jpg"
import noImg from "../../assets/images/noImg.jpg"
import "./Cart.scss"
import { NavBar,Checkbox } from "antd-mobile";
export default class Cart extends Component {
  state = {
    carts:[]
  }
  componentDidMount(){
    let carts_str = localStorage.getItem("carts");
    let carts = JSON.parse(carts_str || "[]");
    this.setState({
      carts
    })
  }
  render() {
    return (
      <div className="yg-cart">
        {
          this.state.carts.length ?
          <div className="yg-cart-content">
            <div>
              <NavBar className="cart-content-nav">优购商城</NavBar>
            </div>
            {/* 购物小车列表开始 */}
            <div className="cart-content-list">
              {
                this.state.carts.map((v)=>{
                  return (
                    <div className="content-list-item" key={v.goods_id}>
                      <Checkbox className="list-item-left" checked={v.checked}></Checkbox>
                      <div className="list-item-mid">
                        <img src={v.goods_small_logo?v.goods_small_logo:noImg} alt="" />
                      </div>
                      <div className="list-item-right">
                        <div className="right-top">
                          <div className="right-top-title">{v.goods_name}</div>
                        </div>
                        <div className="right-bottom">
                          <div className="right-bottom-left">
                            ￥{v.goods_price}
                          </div>
                          <div className="right-bottom-right">
                            <i className="iconfont icon-iconjian"></i>
                            <span className="num">{v.num}</span>
                            <i className="iconfont icon-jia"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                  )
                })
              }
            </div>
            {/* 购物小车列表结束 */}
            {/* 底部的结算栏开始 */}
            <div className="cart-content-bottom">
                 <div className="all-checked">
                     <i className='circle'></i>
                     <span className="text">全选</span>
                 </div>
                 <div className="totalPrice">
                     <span className="text1">合计</span>
                     <span className="price">￥63773</span>
                 </div>
                 <div className="pay">
                     <span className="text3">去结算(1)</span>
                 </div>
             </div>
             {/* 底部的结算栏结束 */}
          </div> :<div className="yg-cart-empty">
          <img src={empty} className="cart-empty-img" alt=""/>
           <h3 className="empty_text"><a href="#/category">去逛逛</a></h3>
      </div>
        }
      </div>
    )
  }
}
